<template>
  <div>
    <nav class="navbar navbar-expand-lg position-absolute top-0 z-index-3 w-100 shadow-none my-3  navbar-transparent ">
      <div class="container">
        <a class="navbar-brand text-white d-none d-md-block link-instanted" href="/index.html" rel="tooltip"
          title="小小梦想" data-placement="bottom"> 小小梦想 </a>
        <a class="navbar-brand  text-white  d-block d-md-none" href="/index.html" rel="tooltip" title="小小梦想"
          data-placement="bottom"> 小小梦想 </a>
        <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse"
          data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon mt-2">
            <span class="navbar-toggler-bar bar1"></span>
            <span class="navbar-toggler-bar bar2"></span>
            <span class="navbar-toggler-bar bar3"></span>
          </span>
        </button>
        <Navbar theme="white" />
      </div>
    </nav>

    <Header />

    <section>
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-12">
            <div class="nav-wrapper position-relative end-0 py-5">
              <ul class="nav nav-pills nav-fill p-1" role="tablist">
                <li class="nav-item">
                  <a class="nav-link mb-0 px-0 py-1 active" id="camping" data-bs-toggle="tab"
                    data-bs-target="#camping-content" role="tab" aria-controls="profile" aria-selected="true">
                    露营
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link mb-0 px-0 py-1" id="picnic" data-bs-toggle="tab" data-bs-target="#picnic-content"
                    role="tab" aria-controls="dashboard" aria-selected="false">
                    野炊
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link mb-0 px-0 py-1" id="drive" data-bs-toggle="tab" data-bs-target="#drive-content"
                    role="tab" aria-controls="dashboard" aria-selected="false">
                    自驾
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link mb-0 px-0 py-1" id="equipment" data-bs-toggle="tab"
                    data-bs-target="#equipment-content" role="tab" aria-controls="dashboard" aria-selected="false">
                    装备
                  </a>
                </li>
              </ul>
            </div>
            <div class="tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active" id="camping-content" role="tabpanel" aria-labelledby="camping">
                <div class="card">
                  <div class="table-responsive">
                    <table class="table align-items-center mb-0">
                      <thead>
                        <tr>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7">省份</th>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7">市/县</th>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7">名称 </th>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7"> 类型</th>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7"> 项目</th>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7"> 海拔</th>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7">收费情况</th>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7">厕所</th>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7">联系电话</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="c in $parent.camping" :key="c.id">
                          <td class="text-xs text-center mb-0">{{ c.p }}</td>
                          <td class="text-xs text-left mb-0 px-3">
                            <p class="text-xs mb-0"> {{ c.c }}</p>
                          </td>
                          <td class="text-xs text-left mb-0">
                            <h6 class="mb-0 text-secondary text-xs">{{ c.name }}</h6>
                          </td>
                          <td class="text-xs text-center mb-0">{{ $parent.categories.camping[c.type] }}</td>
                          <td class="text-xs text-left mb-0">{{ c.prjs }}</td>
                          <td class="text-xs text-center mb-0">{{ c.altitude > 0 ? c.altitude : '未知' }}</td>
                          <td class="align-middle text-center">
                            <span class="text-secondary text-xs">{{ c.charges }}</span>
                          </td>
                          <td class="align-middle text-center text-sm">
                            <span class="text-secondary text-xs">{{ c.toilet == 1 ? '有' : '无' }}</span>
                          </td>
                          <td class="text-xs text-center mb-0">{{ c.phone }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="picnic-content" role="tabpanel" aria-labelledby="picnic">
                <div class="card">
                  <div class="table-responsive">
                    <table class="table align-items-center mb-0">
                      <thead>
                        <tr>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7">类别</th>
                          <th class="text-left text-secondary text-xxs font-weight-bolder opacity-7">书籍名称</th>
                          <th class="text-left text-secondary text-xxs font-weight-bolder opacity-7"> 作者 / 译者</th>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7"> 出版社</th>
                          <th class="text-left text-secondary text-xxs font-weight-bolder opacity-7">ISBN</th>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7">出版日期</th>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7">操作</th>
                          <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7">分享码</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="c in $parent.picnic" :key="c.name">
                          <td class="text-xs text-center mb-0">{{ c.p }}</td>
                          <td class="text-xs text-left mb-0 px-3">
                            <h6 class="mb-0 text-xs"> {{ c.c }}</h6>
                          </td>
                          <td class="text-xs text-left mb-0">
                            <p class="text-xs text-secondary mb-0">{{ c.name }}</p>
                          </td>
                          <td class="text-xs text-center mb-0">{{ $parent.categories.camping[c.type] }}</td>
                          <td class="text-xs text-left mb-0">{{ c.altitude }}</td>
                          <td class="align-middle text-center">
                            <span class="text-secondary text-xs">{{ c.charges }}</span>
                          </td>
                          <td class="align-middle text-center text-sm">
                            <span class="text-secondary text-xs">{{ c.toilet }}</span>
                          </td>
                          <td class="text-xs text-center mb-0">{{ '' }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="drive-content" role="tabpanel" aria-labelledby="drive">
                <div class="card">
                  <div class="table-responsive">
                    <table class="table align-items-center mb-0">
                      <thead>
                        <tr>
                          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Author</th>
                          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Function
                          </th>
                          <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                            Technology</th>
                          <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                            Employed</th>
                          <th class="text-secondary opacity-7"></th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>
                            <div class="d-flex px-2 py-1">
                              <div>
                                <img src="/assets/img/team-2.jpg" class="avatar avatar-sm me-3">
                              </div>
                              <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-xs">John Michael</h6>
                                <p class="text-xs text-secondary mb-0">john@creative-tim.com</p>
                              </div>
                            </div>
                          </td>
                          <td>
                            <p class="text-xs font-weight-bold mb-0">Manager</p>
                            <p class="text-xs text-secondary mb-0">Organization</p>
                          </td>
                          <td class="align-middle text-center text-sm">
                            <span class="badge badge-sm badge-success">Online</span>
                          </td>
                          <td class="align-middle text-center">
                            <span class="text-secondary text-xs font-weight-bold">23/04/18</span>
                          </td>
                          <td class="align-middle">
                            <a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip"
                              data-original-title="Edit user">
                              Edit
                            </a>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="equipment-content" role="tabpanel" aria-labelledby="equipment">
                <div class="card">
                  <div class="table-responsive">
                    <table class="table align-items-center mb-0">
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <Footer />
    <Statistics />
  </div>
</template>

<script>
import Navbar from "../../components/Navbar.vue";
import Header from "../../components/Header.vue";
import Footer from "../../components/V-Footer.vue";
import Statistics from "../../components/Statistics.vue";

export default {
  name: "Outdoors",
  components: {
    Navbar,
    Header,
    Footer,
    Statistics,
  },
};
</script>
